<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>The Brand Page</title>
    <link rel="stylesheet" th:href="@{/css/brand.css}" />
</head>
<body>
    <div>
        <h1>The Brand Page</h1>
        <div>
            <input type="text" name="name" id="name" />
            <input type="button" name="search" value="Search" onclick="doFindBrands()" />
            <input type="button" name="add" value="Add" onclick="doAdd()" />
        </div>
        <div>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Remark</th>
                        <th>CreatedTime</th>
                        <th colspan="2">Operation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="brand:${list}">
                        <td th:text="${brand.id}">1</td>
                        <td th:text="${brand.name}">小米</td>
                        <td th:text="${brand.remark}">小米之家</td>
                        <td th:text="${brand.createdTime}">2020-12-1</td>
                        <td><button type="button" th:onclick="doDelete([[${brand.id}]])">Delete</button></td>
                        <td><button type="button" th:onclick="doUpdate([[${brand.id}]])">Update</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        function doFindBrands() {
            var name = document.getElementById("name").value;
            location.href=`/brand/doFindBrands/${name}`;
        }

        function doAdd() {
            location.href=`/brand/doAdd`;
        }

        function doDelete(id) {
            location.href=`/brand/doDeleteBrand/${id}`;
        }

        function doUpdate(id) {
            location.href=`/brand/doFindById/${id}`;
        }
    </script>
</body>
</html>